Produced by Araxis Merge on 2024-03-04 14:38:49 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.
| # | Location | File | Last Modified |
|---|---|---|---|
| 1 | /Users/coca/Documents/www/Porto v4.0.2/Theme Files/Magento 2.x/Porto Theme v4.0.7/app/design/frontend/Smartwave/porto/Magento_Catalog/templates/product/view | gallery.phtml | 2023-11-22 08:35:59 +0000 |
| 2 | /Users/coca/Documents/www/Porto v4.0.2/Theme Files/Magento 2.x/Porto Theme v4.0.8/app/design/frontend/Smartwave/porto/Magento_Catalog/templates/product/view | gallery.phtml | 2024-02-24 04:11:07 +0000 |
| Description | Between Files 1 and 2 | |
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 9 | 1022 |
| Changed | 2 | 4 |
| Inserted | 4 | 14 |
| Removed | 2 | 2 |
| Whitespace | Consecutive whitespace is treated as a single space |
|---|---|
| Character case | Differences in character case are significant |
| Line endings | Differences in line endings (CR and LF characters) are ignored |
| CR/LF characters | Not shown in the comparison detail |
| Active line-pairing rules |
No regular expressions were active.
| 1 | <?php | 1 | <?php | |||
| 2 | /** | 2 | /** | |||
| 3 | * Copyright © Magento, Inc. All rights reserved. | 3 | * Copyright © Magento, Inc. All rights reserved. | |||
| 4 | * See COPYING.txt for license details. | 4 | * See COPYING.txt for license details. | |||
| 5 | */ | 5 | */ | |||
| 6 | 6 | |||||
| 7 | // @codingStandardsIgnoreFile | 7 | // @codingStandardsIgnoreFile | |||
| 8 | 8 | |||||
| 9 | /** | 9 | /** | |||
| 10 | * Product media data template | 10 | * Product media data template | |||
| 11 | * | 11 | * | |||
| 12 | * @var $block \Magento\Catalog\Block\Product\View\Gallery | 12 | * @var $block \Magento\Catalog\Block\Product\View\Gallery | |||
| 13 | */ | 13 | */ | |||
| 14 | ?> | 14 | ?> | |||
| 15 | <?php | 15 | <?php | |||
| 16 | $helper = $block->getData('imageHelper'); | 16 | $helper = $block->getData('imageHelper'); | |||
| 17 | $porto_helper = $this->helper('Smartwave\Porto\Helper\Data'); | 17 | $porto_helper = $this->helper('Smartwave\Porto\Helper\Data'); | |||
| 18 | $_config = $porto_helper->getConfig('porto_settings/product'); | 18 | $_config = $porto_helper->getConfig('porto_settings/product'); | |||
| 19 | $_enable_flick = (isset($_config['enable_flick_slide']) && $_config['enable_flick_slide'])?$_config['enable_flick_slide']:0; | |||||
| 19 | $image_width = (isset($_config['ratio_width']) && $_config['ratio_width'])?$_config['ratio_width']:600; | 20 | $image_width = (isset($_config['ratio_width']) && $_config['ratio_width'])?$_config['ratio_width']:600; | |||
| 20 | $image_height = (isset($_config['ratio_height']) && $_config['ratio_height'])?$_config['ratio_height']:600; | 21 | $image_height = (isset($_config['ratio_height']) && $_config['ratio_height'])?$_config['ratio_height']:600; | |||
| 21 | $aspect_ratio = (isset($_config['aspect_ratio']))?$_config['aspect_ratio']:0; | 22 | $aspect_ratio = (isset($_config['aspect_ratio']))?$_config['aspect_ratio']:0; | |||
| 22 | $disable_zoom = (isset($_config['disable_zoom']))?$_config['disable_zoom']:0; | 23 | $disable_zoom = (isset($_config['disable_zoom']))?$_config['disable_zoom']:0; | |||
| 23 | if ($aspect_ratio) | 24 | if ($aspect_ratio) | |||
| 24 | $image_height = $image_width; | 25 | $image_height = $image_width; | |||
| 25 | $thumb_width = 100; | 26 | $thumb_width = 100; | |||
| 26 | $thumb_height = 100 * $image_height / $image_width; | 27 | $thumb_height = 100 * $image_height / $image_width; | |||
| 27 | if ($aspect_ratio) | 28 | if ($aspect_ratio) | |||
| 28 | $thumb_height = 100; | 29 | $thumb_height = 100; | |||
| 29 | $_product = $block->getProduct(); | 30 | $_product = $block->getProduct(); | |||
| 30 | $page_type = $_product->getData('product_page_type'); | 31 | $page_type = $_product->getData('product_page_type'); | |||
| 31 | if(!$page_type) | 32 | if(!$page_type) | |||
| 32 | $page_type = isset($_config['product_page_type'])?$_config['product_page_type']:''; | 33 | $page_type = isset($_config['product_page_type'])?$_config['product_page_type']:''; | |||
| 33 | $image_size = $_product->getData('product_image_size'); | 34 | $image_size = $_product->getData('product_image_size'); | |||
| 34 | $thumbnail_type = (isset($_config['vertical_thumbnail']) && $_config['vertical_thumbnail'])?'vertical':'horizontal'; | 35 | $thumbnail_type = (isset($_config['vertical_thumbnail']) && $_config['vertical_thumbnail'])?'vertical':'horizontal'; | |||
| 35 | if($page_type == 'wide_grid') { | 36 | if($page_type == 'wide_grid') { | |||
| 36 | $thumbnail_type = 'vertical'; | 37 | $thumbnail_type = 'vertical'; | |||
| 37 | $thumb_width = 100; | 38 | $thumb_width = 100; | |||
| 38 | $thumb_height = 100; | 39 | $thumb_height = 100; | |||
| 39 | } | 40 | } | |||
| 40 | ?> | 41 | ?> | |||
| 41 | <?php if($page_type == 'carousel'): ?> | 42 | <?php if($page_type == 'carousel'): ?> | |||
| 42 | <?php | 43 | <?php | |||
| 43 | $gallery_images = json_decode($block->getGalleryImagesJson()); | 44 | $gallery_images = json_decode($block->getGalleryImagesJson()); | |||
| 44 | ?> | 45 | ?> | |||
| 45 | <div id="gallery_images" class="owl-carousel product-image-carousel show-nav-hover | 46 | <div id="gallery_images" class="owl-carousel product-image-carousel show-nav-hover<?php if($_enable_flick):?> flick-carousel<?php endif;?>"> | |||
| 46 | <?php foreach($gallery_images as $gallery_image): ?> | 47 | <?php foreach($gallery_images as $gallery_image): ?> | |||
| 47 | <div class="item"> | 48 | <div class="item"> | |||
| 48 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | 49 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | |||
| 49 | </div> | 50 | </div> | |||
| 50 | <?php endforeach; ?> | 51 | <?php endforeach; ?> | |||
| 51 | </div> | 52 | </div> | |||
| 52 | <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")?$_product->getData("custom_block"):''); ?></div> | 53 | <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")?$_product->getData("custom_block"):''); ?></div> | |||
| 53 | <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block_2")?$_product->getData("custom_block_2"):''); ?></div> | 54 | <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block_2")?$_product->getData("custom_block_2"):''); ?></div> | |||
| 54 | <script type="text/javascript"> | 55 | <script type="text/javascript"> | |||
| 55 | require([ | 56 | require([ | |||
| 56 | 'jquery', | 57 | 'jquery', | |||
| 57 | 'owl.carousel/owl.carousel.min' | 58 | 'owl.carousel/owl.carousel.min' | |||
| 58 | ], function ($) { | 59 | ], function ($) { | |||
| 59 | $("#gallery_images").owlCarousel({ | 60 | $("#gallery_images").owlCarousel({ | |||
| 60 | autoplay: false, | 61 | autoplay: false, | |||
| 61 | autoplayTimeout: 5000, | 62 | autoplayTimeout: 5000, | |||
| 62 | autoplayHoverPause: true, | 63 | autoplayHoverPause: true, | |||
| 63 | loop: true, | |||||
| 64 | navRewind: true, | 64 | navRewind: true, | |||
| 65 | margin: 0, | |||||
| 66 | nav: true, | 65 | nav: true, | |||
| 67 | dots: false, | 66 | dots: false, | |||
| 68 | responsive: { | 67 | responsive: { | |||
| 69 | 0: { | 68 | 0: { | |||
| 70 | items:1 | 69 | items:1 | |||
| 71 | }, | 70 | }, | |||
| 72 | 768: { | 71 | 768: { | |||
| 73 | items:1 | 72 | items:1 | |||
| 74 | }, | 73 | }, | |||
| 75 | 992: { | 74 | 992: { | |||
| 76 | items:2 | 75 | items:2 | |||
| 77 | }, | 76 | }, | |||
| 77 | <?php if($_enable_flick):?> | |||||
| 78 | 1200: { | 78 | 1200: { | |||
| 79 | items:3 | 79 | items:2 | |||
| 80 | } | 80 | } | |||
| 81 | <?php else: ?> | |||||
| 82 | 1200: { | |||||
| 83 | items:3 | |||||
| 81 | } | 84 | } | |||
| 85 | <?php endif;?> | |||||
| 86 | }, | |||||
| 87 | <?php if($_enable_flick):?> | |||||
| 88 | margin: 20, | |||||
| 89 | loop: false | |||||
| 90 | <?php else: ?> | |||||
| 91 | margin: 0, | |||||
| 92 | loop: true | |||||
| 93 | <?php endif;?> | |||||
| 82 | }); | 94 | }); | |||
| 83 | $(document).ready(function(){ | 95 | $(document).ready(function(){ | |||
| 84 | $(".product-info-main > .product-info-price").after($(".short-custom-block").show().detach()); | 96 | $(".product-info-main > .product-info-price").after($(".short-custom-block").show().detach()); | |||
| 85 | $(".page-main").after($(".fullwidth-custom-block").show().detach()); | 97 | $(".page-main").after($(".fullwidth-custom-block").show().detach()); | |||
| 86 | $(".product-info-main > .page-title-wrapper").after($(".product-social-links").detach()); | 98 | $(".product-info-main > .page-title-wrapper").after($(".product-social-links").detach()); | |||
| 87 | }); | 99 | }); | |||
| 88 | }); | 100 | }); | |||
| 89 | </script> | 101 | </script> | |||
| 90 | <?php elseif($page_type == 'grid'): ?> | 102 | <?php elseif($page_type == 'grid'): ?> | |||
| 91 | <?php | 103 | <?php | |||
| 92 | $gallery_images = json_decode($block->getGalleryImagesJson()); | 104 | $gallery_images = json_decode($block->getGalleryImagesJson()); | |||
| 93 | ?> | 105 | ?> | |||
| 94 | <div id="gallery_images" class="row"> | 106 | <div id="gallery_images" class="row"> | |||
| 95 | <?php foreach($gallery_images as $gallery_image): ?> | 107 | <?php foreach($gallery_images as $gallery_image): ?> | |||
| 96 | <div class="col-sm-6"> | 108 | <div class="col-sm-6"> | |||
| 97 | <div class="product-image-grid"> | 109 | <div class="product-image-grid"> | |||
| 98 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | 110 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | |||
| 99 | </div> | 111 | </div> | |||
| 100 | </div> | 112 | </div> | |||
| 101 | <?php endforeach; ?> | 113 | <?php endforeach; ?> | |||
| 102 | </div> | 114 | </div> | |||
| 103 | <?php elseif($page_type == 'sticky_right'): ?> | 115 | <?php elseif($page_type == 'sticky_right'): ?> | |||
| 104 | <?php | 116 | <?php | |||
| 105 | $gallery_images = json_decode($block->getGalleryImagesJson()); | 117 | $gallery_images = json_decode($block->getGalleryImagesJson()); | |||
| 106 | ?> | 118 | ?> | |||
| 107 | <div id="gallery_images"> | 119 | <div id="gallery_images"> | |||
| 108 | <?php foreach($gallery_images as $gallery_image): ?> | 120 | <?php foreach($gallery_images as $gallery_image): ?> | |||
| 109 | <div class="product-image-list"> | 121 | <div class="product-image-list"> | |||
| 110 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | 122 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | |||
| 111 | </div> | 123 | </div> | |||
| 112 | <?php endforeach; ?> | 124 | <?php endforeach; ?> | |||
| 113 | </div> | 125 | </div> | |||
| 114 | <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")?$_product->getData("custom_block"):''); ?></div> | 126 | <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")?$_product->getData("custom_block"):''); ?></div> | |||
| 115 | <script type="text/javascript"> | 127 | <script type="text/javascript"> | |||
| 116 | require([ | 128 | require([ | |||
| 117 | 'jquery' | 129 | 'jquery' | |||
| 118 | ], function ($) { | 130 | ], function ($) { | |||
| 119 | var product_info_top = 0; | 131 | var product_info_top = 0; | |||
| 120 | var product_image_box_pos = $(".product.media").offset().top; | 132 | var product_image_box_pos = $(".product.media").offset().top; | |||
| 121 | $(".product.detailed").before($(".short-custom-block").show().detach()).before($(".product-social-links").detach()); | 133 | $(".product.detailed").before($(".short-custom-block").show().detach()).before($(".product-social-links").detach()); | |||
| 122 | $(window).scroll(function(){ | 134 | $(window).scroll(function(){ | |||
| 123 | product_image_box_pos = $(".product.media").offset().top; | 135 | product_image_box_pos = $(".product.media").offset().top; | |||
| 124 | if($(window).innerWidth() >= 768) { | 136 | if($(window).innerWidth() >= 768) { | |||
| 125 | $(".product-info-main").each(function(){ | 137 | $(".product-info-main").each(function(){ | |||
| 126 | if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | 138 | if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | |||
| 127 | product_info_top = $(window).scrollTop() - product_image_box_pos + 50; | 139 | product_info_top = $(window).scrollTop() - product_image_box_pos + 50; | |||
| 128 | $(this).css('top',product_info_top + 'px'); | 140 | $(this).css('top',product_info_top + 'px'); | |||
| 129 | } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) { | 141 | } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) { | |||
| 130 | product_info_top = 0; | 142 | product_info_top = 0; | |||
| 131 | $(this).css('top',product_info_top + 'px'); | 143 | $(this).css('top',product_info_top + 'px'); | |||
| 132 | } else { | 144 | } else { | |||
| 133 | product_info_top = $(".product.media").outerHeight() - $(this).outerHeight(); | 145 | product_info_top = $(".product.media").outerHeight() - $(this).outerHeight(); | |||
| 134 | $(this).css('top',product_info_top + 'px'); | 146 | $(this).css('top',product_info_top + 'px'); | |||
| 135 | } | 147 | } | |||
| 136 | }); | 148 | }); | |||
| 137 | } else { | 149 | } else { | |||
| 138 | product_info_top = 0; | 150 | product_info_top = 0; | |||
| 139 | $(".product-info-main").css('top',product_info_top + 'px'); | 151 | $(".product-info-main").css('top',product_info_top + 'px'); | |||
| 140 | } | 152 | } | |||
| 141 | }); | 153 | }); | |||
| 142 | $(window).resize(function(){ | 154 | $(window).resize(function(){ | |||
| 143 | product_image_box_pos = $(".product.media").offset().top; | 155 | product_image_box_pos = $(".product.media").offset().top; | |||
| 144 | if($(window).innerWidth() >= 992) { | 156 | if($(window).innerWidth() >= 992) { | |||
| 145 | $(".product-info-main").each(function(){ | 157 | $(".product-info-main").each(function(){ | |||
| 146 | if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | 158 | if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | |||
| 147 | product_info_top = $(window).scrollTop() - product_image_box_pos + 50; | 159 | product_info_top = $(window).scrollTop() - product_image_box_pos + 50; | |||
| 148 | $(this).css('top',product_info_top + 'px'); | 160 | $(this).css('top',product_info_top + 'px'); | |||
| 149 | } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) { | 161 | } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) { | |||
| 150 | product_info_top = 0; | 162 | product_info_top = 0; | |||
| 151 | $(this).css('top',product_info_top + 'px'); | 163 | $(this).css('top',product_info_top + 'px'); | |||
| 152 | } else { | 164 | } else { | |||
| 153 | product_info_top = $(".product.media").outerHeight() - $(this).outerHeight(); | 165 | product_info_top = $(".product.media").outerHeight() - $(this).outerHeight(); | |||
| 154 | $(this).css('top',product_info_top + 'px'); | 166 | $(this).css('top',product_info_top + 'px'); | |||
| 155 | } | 167 | } | |||
| 156 | }); | 168 | }); | |||
| 157 | } else { | 169 | } else { | |||
| 158 | product_info_top = 0; | 170 | product_info_top = 0; | |||
| 159 | $(".product-info-main").css('top',product_info_top + 'px'); | 171 | $(".product-info-main").css('top',product_info_top + 'px'); | |||
| 160 | } | 172 | } | |||
| 161 | }); | 173 | }); | |||
| 162 | }); | 174 | }); | |||
| 163 | </script> | 175 | </script> | |||
| 164 | <?php elseif($page_type == 'fullwidth'): ?> | 176 | <?php elseif($page_type == 'fullwidth'): ?> | |||
| 165 | <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> | 177 | <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> | |||
| 166 | <div data-role="loader" class="loading-mask"> | 178 | <div data-role="loader" class="loading-mask"> | |||
| 167 | <div class="loader"> | 179 | <div class="loader"> | |||
| 168 | <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" | 180 | <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" | |||
| 169 | alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>"> | 181 | alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>"> | |||
| 170 | </div> | 182 | </div> | |||
| 171 | </div> | 183 | </div> | |||
| 172 | </div> | 184 | </div> | |||
| 173 | <!--Fix for jumping content. Loader must be the same size as gallery.--> | 185 | <!--Fix for jumping content. Loader must be the same size as gallery.--> | |||
| 174 | <script> | 186 | <script> | |||
| 175 | var config = { | 187 | var config = { | |||
| 176 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | 188 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | |||
| 177 | "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height') | 189 | "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height') | |||
| 178 | ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, | 190 | ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, | |||
| 179 | "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>", | 191 | "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>", | |||
| 180 | <?php if (!$aspect_ratio): ?> | 192 | <?php if (!$aspect_ratio): ?> | |||
| 181 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?> | 193 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?> | |||
| 182 | <?php endif; ?> | 194 | <?php endif; ?> | |||
| 183 | }, | 195 | }, | |||
| 184 | thumbBarHeight = 0, | 196 | thumbBarHeight = 0, | |||
| 185 | loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0]; | 197 | loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0]; | |||
| 186 | 198 | |||||
| 187 | if (config.navtype === 'horizontal') { | 199 | if (config.navtype === 'horizontal') { | |||
| 188 | thumbBarHeight = config.thumbheight; | 200 | thumbBarHeight = config.thumbheight; | |||
| 189 | } | 201 | } | |||
| 190 | 202 | |||||
| 191 | loader.style.paddingBottom = ( config.height / config.width * 100) + "%"; | 203 | loader.style.paddingBottom = ( config.height / config.width * 100) + "%"; | |||
| 192 | </script> | 204 | </script> | |||
| 193 | <script type="text/x-magento-init"> | 205 | <script type="text/x-magento-init"> | |||
| 194 | { | 206 | { | |||
| 195 | "[data-gallery-role=gallery-placeholder]": { | 207 | "[data-gallery-role=gallery-placeholder]": { | |||
| 196 | "mage/gallery/gallery": { | 208 | "mage/gallery/gallery": { | |||
| 197 | "mixins":["magnifier/magnify"], | 209 | "mixins":["magnifier/magnify"], | |||
| 198 | "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>, | 210 | "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>, | |||
| 199 | "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>, | 211 | "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>, | |||
| 200 | "options": { | 212 | "options": { | |||
| 201 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>", | 213 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>", | |||
| 202 | <?php if (($block->getVar("gallery/loop"))): ?> | 214 | <?php if (($block->getVar("gallery/loop"))): ?> | |||
| 203 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>, | 215 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>, | |||
| 204 | <?php endif; ?> | 216 | <?php endif; ?> | |||
| 205 | <?php if (($block->getVar("gallery/keyboard"))): ?> | 217 | <?php if (($block->getVar("gallery/keyboard"))): ?> | |||
| 206 | "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>, | 218 | "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>, | |||
| 207 | <?php endif; ?> | 219 | <?php endif; ?> | |||
| 208 | <?php if (($block->getVar("gallery/arrows"))): ?> | 220 | <?php if (($block->getVar("gallery/arrows"))): ?> | |||
| 209 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>, | 221 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>, | |||
| 210 | <?php endif; ?> | 222 | <?php endif; ?> | |||
| 211 | <?php if (($block->getVar("gallery/allowfullscreen"))): ?> | 223 | <?php if (($block->getVar("gallery/allowfullscreen"))): ?> | |||
| 212 | "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>, | 224 | "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>, | |||
| 213 | <?php endif; ?> | 225 | <?php endif; ?> | |||
| 214 | <?php if (($block->getVar("gallery/caption"))): ?> | 226 | <?php if (($block->getVar("gallery/caption"))): ?> | |||
| 215 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>, | 227 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>, | |||
| 216 | <?php endif; ?> | 228 | <?php endif; ?> | |||
| 217 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | 229 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | |||
| 218 | "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>, | 230 | "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>, | |||
| 219 | "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>, | 231 | "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>, | |||
| 220 | <?php if(!$aspect_ratio): ?> | 232 | <?php if(!$aspect_ratio): ?> | |||
| 221 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?>, | 233 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?>, | |||
| 222 | <?php endif; ?> | 234 | <?php endif; ?> | |||
| 223 | "thumbmargin": <?php echo $block->getVar("gallery/thumbmargin") ?>, | 235 | "thumbmargin": <?php echo $block->getVar("gallery/thumbmargin") ?>, | |||
| 224 | <?php if ($block->getVar("gallery/transition/duration")): ?> | 236 | <?php if ($block->getVar("gallery/transition/duration")): ?> | |||
| 225 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>, | 237 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>, | |||
| 226 | <?php endif; ?> | 238 | <?php endif; ?> | |||
| 227 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>", | 239 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>", | |||
| 228 | <?php if (($block->getVar("gallery/navarrows"))): ?> | 240 | <?php if (($block->getVar("gallery/navarrows"))): ?> | |||
| 229 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>, | 241 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>, | |||
| 230 | <?php endif; ?> | 242 | <?php endif; ?> | |||
| 231 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>", | 243 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>", | |||
| 232 | "navdir": "vertical" | 244 | "navdir": "vertical" | |||
| 233 | }, | 245 | }, | |||
| 234 | "fullscreen": { | 246 | "fullscreen": { | |||
| 235 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>", | 247 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>", | |||
| 236 | <?php if ($block->getVar("gallery/fullscreen/loop")): ?> | 248 | <?php if ($block->getVar("gallery/fullscreen/loop")): ?> | |||
| 237 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>, | 249 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>, | |||
| 238 | <?php endif; ?> | 250 | <?php endif; ?> | |||
| 239 | "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>", | 251 | "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>", | |||
| 240 | <?php if ($block->getVar("gallery/transition/navarrows")): ?> | 252 | <?php if ($block->getVar("gallery/transition/navarrows")): ?> | |||
| 241 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>, | 253 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>, | |||
| 242 | <?php endif; ?> | 254 | <?php endif; ?> | |||
| 243 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>", | 255 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>", | |||
| 244 | <?php if ($block->getVar("gallery/fullscreen/arrows")): ?> | 256 | <?php if ($block->getVar("gallery/fullscreen/arrows")): ?> | |||
| 245 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>, | 257 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>, | |||
| 246 | <?php endif; ?> | 258 | <?php endif; ?> | |||
| 247 | <?php if ($block->getVar("gallery/fullscreen/caption")): ?> | 259 | <?php if ($block->getVar("gallery/fullscreen/caption")): ?> | |||
| 248 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>, | 260 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>, | |||
| 249 | <?php endif; ?> | 261 | <?php endif; ?> | |||
| 250 | <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?> | 262 | <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?> | |||
| 251 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>, | 263 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>, | |||
| 252 | <?php endif; ?> | 264 | <?php endif; ?> | |||
| 253 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>" | 265 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>" | |||
| 254 | }, | 266 | }, | |||
| 255 | "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?> | 267 | "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?> | |||
| 256 | } | 268 | } | |||
| 257 | } | 269 | } | |||
| 258 | } | 270 | } | |||
| 259 | </script> | 271 | </script> | |||
| 260 | <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")?$_product->getData("custom_block"):''); ?></div> | 272 | <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")?$_product->getData("custom_block"):''); ?></div> | |||
| 261 | <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block_2")?$_product->getData("custom_block_2"):''); ?></div> | 273 | <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block_2")?$_product->getData("custom_block_2"):''); ?></div> | |||
| 262 | <script type="text/javascript"> | 274 | <script type="text/javascript"> | |||
| 263 | require([ | 275 | require([ | |||
| 264 | 'jquery' | 276 | 'jquery' | |||
| 265 | ], function($){ | 277 | ], function($){ | |||
| 266 | $(document).on('fotorama:load', function(e, fotorama, extra){ | 278 | $(document).on('fotorama:load', function(e, fotorama, extra){ | |||
| 267 | if($('.loading-mask').length>0) | 279 | if($('.loading-mask').length>0) | |||
| 268 | $('.loading-mask').remove(); | 280 | $('.loading-mask').remove(); | |||
| 269 | }); | 281 | }); | |||
| 270 | $(document).ready(function(){ | 282 | $(document).ready(function(){ | |||
| 271 | $(".product.info.detailed").detach().appendTo($(".product-info-main")); | 283 | $(".product.info.detailed").detach().appendTo($(".product-info-main")); | |||
| 272 | $(".page-main").after($(".fullwidth-custom-block").show().detach()); | 284 | $(".page-main").after($(".fullwidth-custom-block").show().detach()); | |||
| 273 | $(".page-title-wrapper.product").before($(".short-custom-block").show().detach()); | 285 | $(".page-title-wrapper.product").before($(".short-custom-block").show().detach()); | |||
| 274 | }); | 286 | }); | |||
| 275 | var product_image_box_top = 0; | 287 | var product_image_box_top = 0; | |||
| 276 | var product_info_pos = $(".product-info-main").offset().top; | 288 | var product_info_pos = $(".product-info-main").offset().top; | |||
| 277 | $(window).scroll(function(){ | 289 | $(window).scroll(function(){ | |||
| 278 | product_info_pos = $(".product-info-main").offset().top; | 290 | product_info_pos = $(".product-info-main").offset().top; | |||
| 279 | if($(window).innerWidth() >= 768) { | 291 | if($(window).innerWidth() >= 768) { | |||
| 280 | $(".product.media").each(function(){ | 292 | $(".product.media").each(function(){ | |||
| 281 | if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | 293 | if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | |||
| 282 | product_image_box_top = $(window).scrollTop() - product_info_pos + 50; | 294 | product_image_box_top = $(window).scrollTop() - product_info_pos + 50; | |||
| 283 | $(this).css('top',product_image_box_top + 'px'); | 295 | $(this).css('top',product_image_box_top + 'px'); | |||
| 284 | } else if ($(window).scrollTop() < product_info_pos) { | 296 | } else if ($(window).scrollTop() < product_info_pos) { | |||
| 285 | product_image_box_top = 0; | 297 | product_image_box_top = 0; | |||
| 286 | $(this).css('top',product_image_box_top + 'px'); | 298 | $(this).css('top',product_image_box_top + 'px'); | |||
| 287 | } | 299 | } | |||
| 288 | }); | 300 | }); | |||
| 289 | } else { | 301 | } else { | |||
| 290 | product_image_box_top = 0; | 302 | product_image_box_top = 0; | |||
| 291 | $(".product.media").css('top',product_image_box_top + 'px'); | 303 | $(".product.media").css('top',product_image_box_top + 'px'); | |||
| 292 | } | 304 | } | |||
| 293 | }); | 305 | }); | |||
| 294 | $(window).resize(function(){ | 306 | $(window).resize(function(){ | |||
| 295 | product_info_pos = $(".product-info-main").offset().top; | 307 | product_info_pos = $(".product-info-main").offset().top; | |||
| 296 | if($(window).innerWidth() >= 768) { | 308 | if($(window).innerWidth() >= 768) { | |||
| 297 | $(".product.media").each(function(){ | 309 | $(".product.media").each(function(){ | |||
| 298 | if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | 310 | if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | |||
| 299 | product_image_box_top = $(window).scrollTop() - product_info_pos + 50; | 311 | product_image_box_top = $(window).scrollTop() - product_info_pos + 50; | |||
| 300 | $(this).css('top',product_image_box_top + 'px'); | 312 | $(this).css('top',product_image_box_top + 'px'); | |||
| 301 | } else if ($(window).scrollTop() < product_info_pos) { | 313 | } else if ($(window).scrollTop() < product_info_pos) { | |||
| 302 | product_image_box_top = 0; | 314 | product_image_box_top = 0; | |||
| 303 | $(this).css('top',product_image_box_top + 'px'); | 315 | $(this).css('top',product_image_box_top + 'px'); | |||
| 304 | } | 316 | } | |||
| 305 | }); | 317 | }); | |||
| 306 | } else { | 318 | } else { | |||
| 307 | product_image_box_top = 0; | 319 | product_image_box_top = 0; | |||
| 308 | $(".product.media").css('top',product_image_box_top + 'px'); | 320 | $(".product.media").css('top',product_image_box_top + 'px'); | |||
| 309 | } | 321 | } | |||
| 310 | }); | 322 | }); | |||
| 311 | }); | 323 | }); | |||
| 312 | </script> | 324 | </script> | |||
| 313 | <style> | 325 | <style> | |||
| 314 | .fotorama__nav-wrap--vertical .fotorama__nav__shaft {margin-top: -<?php echo $block->getVar("gallery/thumbmargin") ?>px;} | 326 | .fotorama__nav-wrap--vertical .fotorama__nav__shaft {margin-top: -<?php echo $block->getVar("gallery/thumbmargin") ?>px;} | |||
| 315 | @media (min-width:768px) { | 327 | @media (min-width:768px) { | |||
| 316 | .fotorama__stage { | 328 | .fotorama__stage { | |||
| 317 | max-width: calc(100% - <?php echo ($block->getVar("gallery/thumbmargin") + $thumb_width); ?>px); | 329 | max-width: calc(100% - <?php echo ($block->getVar("gallery/thumbmargin") + $thumb_width); ?>px); | |||
| 318 | } | 330 | } | |||
| 319 | } | 331 | } | |||
| 320 | </style> | 332 | </style> | |||
| 321 | <?php else: ?> | 333 | <?php else: ?> | |||
| 322 | <?php | 334 | <?php | |||
| 323 | $images = $block->getGalleryImages()->getItems(); | 335 | $images = $block->getGalleryImages()->getItems(); | |||
| 324 | $mainImage = current(array_filter($images, function ($img) use ($block) { | 336 | $mainImage = current(array_filter($images, function ($img) use ($block) { | |||
| 325 | return $block->isMainImage($img); | 337 | return $block->isMainImage($img); | |||
| 326 | })); | 338 | })); | |||
| 327 | if (!empty($images) && empty($mainImage)) { | 339 | if (!empty($images) && empty($mainImage)) { | |||
| 328 | $mainImage = $block->getGalleryImages()->getFirstItem(); | 340 | $mainImage = $block->getGalleryImages()->getFirstItem(); | |||
| 329 | } | 341 | } | |||
| 330 | $mainImageData = $mainImage ? | 342 | $mainImageData = $mainImage ? | |||
| 331 | $mainImage->getData('medium_image_url') : | 343 | $mainImage->getData('medium_image_url') : | |||
| 332 | $helper->getDefaultPlaceholderUrl('image'); | 344 | $helper->getDefaultPlaceholderUrl('image'); | |||
| 333 | 345 | |||||
| 334 | ?> | 346 | ?> | |||
| 335 | <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> | 347 | <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> | |||
| 336 | <img | 348 | <img | |||
| 337 | alt="main product photo" | 349 | alt="main product photo" | |||
| 338 | class="gallery-placeholder__image" | 350 | class="gallery-placeholder__image" | |||
| 339 | src="<?= /* @noEscape */ $mainImageData ?>" | 351 | src="<?= /* @noEscape */ $mainImageData ?>" | |||
| 340 | /> | 352 | /> | |||
| 341 | <div data-role="loader" class="loading-mask"> | 353 | <div data-role="loader" class="loading-mask"> | |||
| 342 | <div class="loader"> | 354 | <div class="loader"> | |||
| 343 | <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" | 355 | <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" | |||
| 344 | alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>"> | 356 | alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>"> | |||
| 345 | </div> | 357 | </div> | |||
| 346 | </div> | 358 | </div> | |||
| 347 | </div> | 359 | </div> | |||
| 348 | <style> | 360 | <style> | |||
| 349 | <?php if($thumbnail_type != 'vertical'):?> | 361 | <?php if($thumbnail_type != 'vertical'):?> | |||
| 350 | .fotorama__wrap { | 362 | .fotorama__wrap { | |||
| 351 | margin-bottom: -<?php echo $block->getVar("gallery/thumbmargin") ?>px; | 363 | margin-bottom: -<?php echo $block->getVar("gallery/thumbmargin") ?>px; | |||
| 352 | } | 364 | } | |||
| 353 | <?php endif;?> | 365 | <?php endif;?> | |||
| 354 | <?php if($thumbnail_type == 'vertical'):?> | 366 | <?php if($thumbnail_type == 'vertical'):?> | |||
| 355 | .fotorama__nav-wrap--vertical .fotorama__nav__shaft {margin-top: -<?php echo $block->getVar("gallery/thumbmargin") ?>px;} | 367 | .fotorama__nav-wrap--vertical .fotorama__nav__shaft {margin-top: -<?php echo $block->getVar("gallery/thumbmargin") ?>px;} | |||
| 356 | @media (min-width:992px) { | 368 | @media (min-width:992px) { | |||
| 357 | .fotorama__stage { | 369 | .fotorama__stage { | |||
| 358 | max-width: calc(100% - <?php echo ($block->getVar("gallery/thumbmargin") + $thumb_width); ?>px); | 370 | max-width: calc(100% - <?php echo ($block->getVar("gallery/thumbmargin") + $thumb_width); ?>px); | |||
| 359 | } | 371 | } | |||
| 360 | } | 372 | } | |||
| 361 | <?php endif;?> | 373 | <?php endif;?> | |||
| 362 | </style> | 374 | </style> | |||
| 363 | <!--Fix for jumping content. Loader must be the same size as gallery.--> | 375 | <!--Fix for jumping content. Loader must be the same size as gallery.--> | |||
| 364 | <script> | 376 | <script> | |||
| 365 | var config = { | 377 | var config = { | |||
| 366 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | 378 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | |||
| 367 | "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height') | 379 | "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height') | |||
| 368 | ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, | 380 | ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, | |||
| 369 | "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>", | 381 | "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>", | |||
| 370 | <?php if (!$aspect_ratio): ?> | 382 | <?php if (!$aspect_ratio): ?> | |||
| 371 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?> | 383 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?> | |||
| 372 | <?php endif; ?> | 384 | <?php endif; ?> | |||
| 373 | }, | 385 | }, | |||
| 374 | thumbBarHeight = 0, | 386 | thumbBarHeight = 0, | |||
| 375 | loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0]; | 387 | loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0]; | |||
| 376 | 388 | |||||
| 377 | if (config.navtype === 'horizontal') { | 389 | if (config.navtype === 'horizontal') { | |||
| 378 | thumbBarHeight = config.thumbheight; | 390 | thumbBarHeight = config.thumbheight; | |||
| 379 | } | 391 | } | |||
| 380 | 392 | |||||
| 381 | loader.style.paddingBottom = ( config.height / config.width * 100) + "%"; | 393 | loader.style.paddingBottom = ( config.height / config.width * 100) + "%"; | |||
| 382 | </script> | 394 | </script> | |||
| 383 | <script type="text/x-magento-init"> | 395 | <script type="text/x-magento-init"> | |||
| 384 | { | 396 | { | |||
| 385 | "[data-gallery-role=gallery-placeholder]": { | 397 | "[data-gallery-role=gallery-placeholder]": { | |||
| 386 | "mage/gallery/gallery": { | 398 | "mage/gallery/gallery": { | |||
| 387 | "mixins":["magnifier/magnify"], | 399 | "mixins":["magnifier/magnify"], | |||
| 388 | "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>, | 400 | "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>, | |||
| 389 | "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>, | 401 | "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>, | |||
| 390 | "options": { | 402 | "options": { | |||
| 391 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>", | 403 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>", | |||
| 392 | <?php if (($block->getVar("gallery/loop"))): ?> | 404 | <?php if (($block->getVar("gallery/loop"))): ?> | |||
| 393 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>, | 405 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>, | |||
| 394 | <?php endif; ?> | 406 | <?php endif; ?> | |||
| 395 | <?php if (($block->getVar("gallery/keyboard"))): ?> | 407 | <?php if (($block->getVar("gallery/keyboard"))): ?> | |||
| 396 | "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>, | 408 | "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>, | |||
| 397 | <?php endif; ?> | 409 | <?php endif; ?> | |||
| 398 | <?php if (($block->getVar("gallery/arrows"))): ?> | 410 | <?php if (($block->getVar("gallery/arrows"))): ?> | |||
| 399 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>, | 411 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>, | |||
| 400 | <?php endif; ?> | 412 | <?php endif; ?> | |||
| 401 | <?php if (($block->getVar("gallery/allowfullscreen"))): ?> | 413 | <?php if (($block->getVar("gallery/allowfullscreen"))): ?> | |||
| 402 | "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>, | 414 | "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>, | |||
| 403 | <?php endif; ?> | 415 | <?php endif; ?> | |||
| 404 | <?php if (($block->getVar("gallery/caption"))): ?> | 416 | <?php if (($block->getVar("gallery/caption"))): ?> | |||
| 405 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>, | 417 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>, | |||
| 406 | <?php endif; ?> | 418 | <?php endif; ?> | |||
| 407 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | 419 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | |||
| 408 | "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>, | 420 | "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>, | |||
| 409 | "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>, | 421 | "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>, | |||
| 410 | <?php if(!$aspect_ratio): ?> | 422 | <?php if(!$aspect_ratio): ?> | |||
| 411 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?>, | 423 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?>, | |||
| 412 | <?php endif; ?> | 424 | <?php endif; ?> | |||
| 413 | "thumbmargin": <?php echo $block->getVar("gallery/thumbmargin") ?>, | 425 | "thumbmargin": <?php echo $block->getVar("gallery/thumbmargin") ?>, | |||
| 414 | <?php if ($block->getVar("gallery/transition/duration")): ?> | 426 | <?php if ($block->getVar("gallery/transition/duration")): ?> | |||
| 415 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>, | 427 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>, | |||
| 416 | <?php endif; ?> | 428 | <?php endif; ?> | |||
| 417 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>", | 429 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>", | |||
| 418 | <?php if (($block->getVar("gallery/navarrows"))): ?> | 430 | <?php if (($block->getVar("gallery/navarrows"))): ?> | |||
| 419 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>, | 431 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>, | |||
| 420 | <?php endif; ?> | 432 | <?php endif; ?> | |||
| 421 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>", | 433 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>", | |||
| 422 | "navdir": "<?= /* @escapeNotVerified */ $thumbnail_type ?>" | 434 | "navdir": "<?= /* @escapeNotVerified */ $thumbnail_type ?>" | |||
| 423 | }, | 435 | }, | |||
| 424 | "fullscreen": { | 436 | "fullscreen": { | |||
| 425 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>", | 437 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>", | |||
| 426 | <?php if ($block->getVar("gallery/fullscreen/loop")): ?> | 438 | <?php if ($block->getVar("gallery/fullscreen/loop")): ?> | |||
| 427 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>, | 439 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>, | |||
| 428 | <?php endif; ?> | 440 | <?php endif; ?> | |||
| 429 | "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>", | 441 | "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>", | |||
| 430 | <?php if ($block->getVar("gallery/transition/navarrows")): ?> | 442 | <?php if ($block->getVar("gallery/transition/navarrows")): ?> | |||
| 431 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>, | 443 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>, | |||
| 432 | <?php endif; ?> | 444 | <?php endif; ?> | |||
| 433 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>", | 445 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>", | |||
| 434 | <?php if ($block->getVar("gallery/fullscreen/arrows")): ?> | 446 | <?php if ($block->getVar("gallery/fullscreen/arrows")): ?> | |||
| 435 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>, | 447 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>, | |||
| 436 | <?php endif; ?> | 448 | <?php endif; ?> | |||
| 437 | <?php if ($block->getVar("gallery/fullscreen/caption")): ?> | 449 | <?php if ($block->getVar("gallery/fullscreen/caption")): ?> | |||
| 438 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>, | 450 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>, | |||
| 439 | <?php endif; ?> | 451 | <?php endif; ?> | |||
| 440 | <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?> | 452 | <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?> | |||
| 441 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>, | 453 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>, | |||
| 442 | <?php endif; ?> | 454 | <?php endif; ?> | |||
| 443 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>" | 455 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>" | |||
| 444 | }, | 456 | }, | |||
| 445 | "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?> | 457 | "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?> | |||
| 446 | } | 458 | } | |||
| 447 | } | 459 | } | |||
| 448 | } | 460 | } | |||
| 449 | </script> | 461 | </script> | |||
| 450 | <script type="text/javascript"> | 462 | <script type="text/javascript"> | |||
| 451 | require([ | 463 | require([ | |||
| 452 | 'jquery', | 464 | 'jquery', | |||
| 453 | 'Magento_Catalog/js/jquery.zoom.min' | 465 | 'Magento_Catalog/js/jquery.zoom.min' | |||
| 454 | ], function ($) { | 466 | ], function ($) { | |||
| 455 | var loaded = false; | 467 | var loaded = false; | |||
| 456 | $(document).on('fotorama:load', function(e, fotorama, extra){ | 468 | $(document).on('fotorama:load', function(e, fotorama, extra){ | |||
| 457 | if($('.loading-mask').length>0) | 469 | if($('.loading-mask').length>0) | |||
| 458 | $('.loading-mask').remove(); | 470 | $('.loading-mask').remove(); | |||
| 459 | }); | 471 | }); | |||
| 460 | <?php if(!$disable_zoom):?> | 472 | <?php if(!$disable_zoom):?> | |||
| 461 | $('.product.media .gallery-placeholder').bind("DOMSubtreeModified",function(){ | 473 | $('.product.media .gallery-placeholder').bind("DOMSubtreeModified",function(){ | |||
| 462 | $('.product.media .fotorama').on('fotorama:ready', function (e, fotorama, extra) { | 474 | $('.product.media .fotorama').on('fotorama:ready', function (e, fotorama, extra) { | |||
| 463 | loaded = false; | 475 | loaded = false; | |||
| 464 | $('.product.media .fotorama').on('fotorama:load', function (e, fotorama, extra) { | 476 | $('.product.media .fotorama').on('fotorama:load', function (e, fotorama, extra) { | |||
| 465 | if(!loaded){ | 477 | if(!loaded){ | |||
| 466 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | 478 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | |||
| 467 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | 479 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | |||
| 468 | touch:false | 480 | touch:false | |||
| 469 | }); | 481 | }); | |||
| 470 | loaded = true; | 482 | loaded = true; | |||
| 471 | } | 483 | } | |||
| 472 | }); | 484 | }); | |||
| 473 | $('.product.media .fotorama').on('fotorama:showend', function (e, fotorama, extra) { | 485 | $('.product.media .fotorama').on('fotorama:showend', function (e, fotorama, extra) { | |||
| 474 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | 486 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | |||
| 475 | touch:false | 487 | touch:false | |||
| 476 | }); | 488 | }); | |||
| 477 | }); | 489 | }); | |||
| 478 | $('.fotorama').off('fotorama:fullscreenenter').on('fotorama:fullscreenenter', function (e, fotorama, extra) { | 490 | $('.fotorama').off('fotorama:fullscreenenter').on('fotorama:fullscreenenter', function (e, fotorama, extra) { | |||
| 479 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | 491 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | |||
| 480 | $('img.zoomImg').remove(); | 492 | $('img.zoomImg').remove(); | |||
| 481 | }); | 493 | }); | |||
| 482 | $('.fotorama').off('fotorama:fullscreenexit').on('fotorama:fullscreenexit', function (e, fotorama, extra) { | 494 | $('.fotorama').off('fotorama:fullscreenexit').on('fotorama:fullscreenexit', function (e, fotorama, extra) { | |||
| 483 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | 495 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | |||
| 484 | $('img.zoomImg').remove(); | 496 | $('img.zoomImg').remove(); | |||
| 485 | $('img.fotorama__img').not('.fotorama__img--full').each(function(){ | 497 | $('img.fotorama__img').not('.fotorama__img--full').each(function(){ | |||
| 486 | $(this).after($(this).parent().children("img.fotorama__img--full")); | 498 | $(this).after($(this).parent().children("img.fotorama__img--full")); | |||
| 487 | }); | 499 | }); | |||
| 488 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | 500 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | |||
| 489 | touch:false | 501 | touch:false | |||
| 490 | }); | 502 | }); | |||
| 491 | $('.product.media .fotorama').off('fotorama:showend').on('fotorama:showend', function (e, fotorama, extra) { | 503 | $('.product.media .fotorama').off('fotorama:showend').on('fotorama:showend', function (e, fotorama, extra) { | |||
| 492 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | 504 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | |||
| 493 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | 505 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | |||
| 494 | touch:false | 506 | touch:false | |||
| 495 | }); | 507 | }); | |||
| 496 | }); | 508 | }); | |||
| 497 | }); | 509 | }); | |||
| 498 | }); | 510 | }); | |||
| 499 | }); | 511 | }); | |||
| 500 | <?php endif;?> | 512 | <?php endif;?> | |||
| 501 | }); | 513 | }); | |||
| 502 | </script> | 514 | </script> | |||
| 503 | <?php endif; ?> | 515 | <?php endif; ?> | |||
| 504 | <?php if ($image_size): ?> | 516 | <?php if ($image_size): ?> | |||
| 505 | <style type="text/css"> | 517 | <style type="text/css"> | |||
| 506 | @media (min-width: 768px) { | 518 | @media (min-width: 768px) { | |||
| 507 | .product.media { | 519 | .product.media { | |||
| 508 | width: <?php echo $image_size * 100 / 12 - 2; ?>% !important; | 520 | width: <?php echo $image_size * 100 / 12 - 2; ?>% !important; | |||
| 509 | } | 521 | } | |||
| 510 | .product-info-main { | 522 | .product-info-main { | |||
| 511 | width: <?php echo (12 - $image_size) * 100 / 12; ?>% !important; | 523 | width: <?php echo (12 - $image_size) * 100 / 12; ?>% !important; | |||
| 512 | } | 524 | } | |||
| 513 | } | 525 | } | |||
| 514 | </style> | 526 | </style> | |||
| 515 | <?php endif; ?> | 527 | <?php endif; ?> |
Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.